<style lang="less" scoped>
.biographical-item {
    background: linear-gradient(180deg, #ecf9ff 0%, #ffffff 100%);
    border-radius: 20rpx;
    position: relative;
    color: #333;
    font-size: 24rpx;
    border: 2rpx solid #f1f5f5;;

    &.mb {
        margin-bottom: 30rpx;
    }
    

    .item-label-count-down {
      position: absolute;
      top: -12rpx;
      left: -6rpx;
      z-index: 99;
      width: 190rpx;
      height: 54rpx;
      line-height: 54rpx;
      text-align: center;
      color: #4e260a;
      font-weight: 500;
      &::before {
        content: "";
        display: inline-block;
        position: absolute;
        background-image: url(https://pic.bangbangtongcheng.com/static/MyPublic/countdown.png);
        background-size: 100% 100%;
        background-repeat: no-repeat;
        top: 0;
        left: -10rpx;
        width: 100%;
        height: 100%;
      }
      .text {
        position: absolute;
        z-index: 2;
        left: 20rpx;
      }
    }
    .item-box {
        padding: 30rpx 20rpx;
        .item-info {
            display: flex;
            flex-flow: row nowrap;
            align-items: center;
            width: 100%;
            margin-bottom: 20rpx;
            
            .header-img {
                // background-color: #f8f8f8;
                width: 96rpx;
                height: 96rpx;
                border-radius: 50rpx;
            }
            .info-data {
                width: calc(100% - 96rpx);
                padding-left: 20rpx;
                height: 120rpx;
                display: flex;
                flex-flow: column wrap;
                justify-content: space-between;

                .info-top {
                    .real-name {
                        font-size: 32rpx;
                        color: #000000;

                    }
                    .text {
                        margin-left: 10rpx;
                    }
                }
                .hope-work {
                    display: flex;
                    .label-name {
                        display: flex;
                        align-items: center;
                    }
                    .label-box {
                        overflow: hidden;
                        display: flex;
                        align-items: center;
                        width: calc(100% - 120rpx - 50rpx);
                        white-space: nowrap;
                        
                        .label {
                          display: inline-block;
                          padding: 8rpx 15rpx;
                          background: #f5f7f9;
                          margin-right: 10rpx;
                          font-weight: 400;
                          font-size: 24rpx;
                          color: #666666;
                          border-radius: 4rpx;
                        }

                    }
                    .gend {
                        // position: absolute;
                        right: 0rpx;
                        .image {
                            width: 50rpx;
                            height: 50rpx;
                            top: 5rpx;
                        }
                
                    }

                }
            }
        }
        .introduce {
            // white-space: nowrap;

        }
    }
    .ellipsis {
		/*强制文本在一行内显示*/
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}
</style>

<template>
    <view class="biographical-item" :class="{mb: itemMB}" @click="details">
        <!-- <view v-if="data.upStatus == 1 && data.examineStatus == 2" class="item-label-count-down">
            <view class="text">
                有效期{{ 30 - data.daysSinceCreateDate }}天
            </view>
        </view> -->
        <view class="item-box">
            <view class="item-info">
                <image
                    class="header-img"
                    mode="aspectFit"
                    :src="setHeaderImage" />
                <view class="info-data">
                    <view class="info-top">
                        <text class="real-name">
                            {{ data.realName }}
                        </text>
                        <text v-if="data.age" class="text">
                            {{ data.age ? data.age + '岁' : '' }}
                        </text>
                        <text v-if="data.highestEducation" class="text">
                            {{ data.highestEducation ? `学历：${data.highestEducation}` : '' }}
                        </text>
                        <text v-if="data.experienceYears" class="text">
                            {{ data.experienceYears ? `工作经验：${setWorkYears}` : '' }}
                        </text>
                    </view>
                    <view class="hope-work">
                        <view class="label-name">
                            期望工作：
                        </view>
                        <view class="label-box">
                            <view v-for="(i, j) in getIntendedPosition(data.intendedPosition)"
                                :key="j" class="label" >
                                {{ i }}
                            </view>
                        </view>
                        <view v-if="data.intendedPosition && data.intendedPosition.split(',').length > 1"
                            class="gend" >
                            <image class="image" src="https://pic.bangbangtongcheng.com/static/index-gradient-right-%20arrow.png" />
                        </view>
                    </view>
                </view>
            </view>
            <view class="introduce ellipsis">
                自我介绍：{{ data.introduction || '' }}
            </view>
        </view>
    </view>
</template>

<script>
export default {
    props: {
        data: {
            type: Object,
            default: () => ({})
        },
        itemMB: {
            type: Boolean,
            default: true
        }
    },
    data() {
        return {

        };
    },
    computed: {
        setHeaderImage(){
            if (!this.data.myPhoto || this.data.myPhoto == 'null') {
                // 从1-5中随机取数,给一个随机的默认头像
                const index = Math.floor(Math.random() * 5) + 1
                if (this.data.sexualDistinction == '1') {
                    // 男生头像
                    this.data.myPhoto = `https://pic.bangbangtongcheng.com/static/bbzc/m${index}.png`
                } else {
                    this.data.myPhoto = `https://pic.bangbangtongcheng.com/static/bbzc/w${index}.png`
                }
            }
            if (this.data.myPhoto) {
            }
            return this.data.myPhoto;
        },
        setWorkYears(){
            if (!this.data.experienceYears) return '';
            const arr = this.data.experienceYears.split('年');
            const y = arr[0];
            return arr.length > 1 ? `${y}年` : y;
        }
    },
    methods: {
        details() {
            this.$emit('item-click',this.data);
        },
        getIntendedPosition(data) {
            if (!data) return [];
            let json = data
            if (json.includes('[') && json.includes(']')) json = JSON.parse(data)
            let arr = []
            json.forEach((item) => {
                let itemArr = item.split(',')
                arr.push(itemArr[itemArr.length - 1])
            })
            return arr
        },
    }
}
</script>